<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getUserListApi } from '@/api/user'
import { ElMessage } from 'element-plus'
import { Search, Refresh, UserFilled } from '@element-plus/icons-vue'

// 搜索表单
const searchForm = reactive({
  userId: '',
  nickName: '',
  phoneNumber: ''
})

// 表格数据
const tableData = ref([])
// 分页参数
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 获取用户列表
const getUserList = async () => {
   const params = {
      page: pagination.currentPage,
      size: pagination.pageSize,
      ...searchForm
    }
    
    const res = await getUserListApi(params)
    console.log(res)
    tableData.value = res.list || []
    pagination.total = res.totals || 0
}

// 搜索
const handleSearch = () => {
  pagination.currentPage = 1
  getUserList()
}

// 重置搜索
const handleReset = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
  pagination.currentPage = 1
  getUserList()
}

// 分页变化
const handleCurrentChange = (page) => {
  pagination.currentPage = page
  getUserList()
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
  pagination.currentPage = 1
  getUserList()
}

// 页面初始化
onMounted(() => {
  getUserList()
})
</script>

<template>
  <div class="user-container">
    <!-- 搜索区域 -->
    <div class="search-section">
      <el-card>
        <el-form :model="searchForm" inline>
          <el-form-item label="用户ID">
            <el-input
              v-model="searchForm.userId"
              placeholder="请输入用户ID"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          
          <el-form-item label="昵称">
            <el-input
              v-model="searchForm.nickName"
              placeholder="请输入昵称"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          
          <el-form-item label="手机号">
            <el-input
              v-model="searchForm.phoneNumber"
              placeholder="请输入手机号"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="handleSearch" >
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <el-card>
                 <el-table
           :data="tableData"
           stripe
           style="width: 100%"
           max-height="500"
           class="compact-table"
         >
          <el-table-column prop="id" label="ID" width="120" align="center" />
          
          <el-table-column prop="avatar" label="头像" width="120" align="center">
            <template #default="{ row }">
              <el-avatar
                :src="row.avatar"
                :size="50"
                :icon="UserFilled"
              />
            </template>
          </el-table-column>
          
          <el-table-column prop="nickName" label="昵称" align="center" />
          
          <el-table-column prop="phoneNumber" label="手机号" align="center" />
          

        </el-table>
        
        <!-- 分页 -->
        <div class="pagination-wrapper">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.user-container {
  padding: 20px;
  
  .search-section {
    margin-bottom: 20px;
  }
  
  .table-section {
    .pagination-wrapper {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
    
    .compact-table {
      :deep(.el-table__body-wrapper .el-table__row) {
        height: 50px !important;
      }
      
      :deep(.el-table__cell) {
        padding: 8px 0 !important;
      }
    }
    
    // 全局表格行高设置
    :deep(.el-table .el-table__body-wrapper .el-table__row) {
      height: 50px !important;
    }
  }
}
</style>